<template>
  <div class="history">
    <div class="leftcontainer">
      <el-input
        placeholder="输入关键字进行过滤"
        class="realtimeInput"
        v-model="input"
      ></el-input>
      <el-tree
        :data="engineerTree"
        :props="props"
        @node-click="handleNodeClick"
        :filter-node-method="filterNode"
        ref="tree"
      ></el-tree>
    </div>
    <div class="rightcontainer">
      <div v-if="Object.keys(resData).length === 0" class="notList">
        请选择设备查看
      </div>
      <div v-else class="table">
        <div class="block">
          <el-date-picker
            v-model="date"
            type="datetimerange"
            align="center"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00', '00:00:00']"
            size="small"
            value-format="timestamp"
          >
          </el-date-picker>
          <el-button
            type="success"
            class="search"
            @click="searchClick"
            size="small"
            >搜索</el-button
          >
        </div>
        <el-table
          :data="resData.list"
          style="width: 100%"
          :inline="true"
          :row-style="{ height: 0 + 'px' }"
          :cell-style="{ padding: 5 + 'px', fontSize: 12 + 'px' }"
        >
          <el-table-column prop="insert_time" label="日期" align="center">
            <template v-slot="{ row }">
              <span>{{ row.insert_time | fmtTime }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="tsp" label="tsp" align="center">
          </el-table-column>
          <el-table-column prop="pm10" label="pm10" align="center">
          </el-table-column>
          <el-table-column prop="pm25" label="pm2.5" align="center">
          </el-table-column>
          <el-table-column prop="temperature" label="温度" align="center">
          </el-table-column>
          <el-table-column prop="wind_direction" label="风向" align="center">
          </el-table-column>
          <el-table-column
            prop="wind_speed"
            label="风速"
            align="center"
          ></el-table-column>
        </el-table>
      </div>
      <div v-if="Object.keys(resData).length > 0">
        <div class="block" v-if="resData.list.length > 0">
          <el-pagination
            background
            @current-change="handleCurrentChange"
            :current-page="parseInt(resData.page)"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="parseInt(resData.pageSize)"
            layout="prev, pager, next"
            :total="parseInt(resData.total)"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { get, postJSON, del } from "@/utils/request.js";

export default {
  data() {
    return {
      engineerTree: [],
      props: {
        // value: "id",
        label: "name",
        children: "children",
      },
      value: [],
      input: "",
      resData: {},
      params: {
        page: 1,
        pageSize: 15,
      },
      cellStyle: {
        height: "20px",
        fontSize: "12px",
      },
      date: [],
    };
  },
  created() {
    this.getEngineer();
  },
  watch: {
    input(val) {
      this.$refs.tree.filter(val);
    },
  },
  methods: {
    //事件监听
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleNodeClick(obj, node) {
      if (obj.engineer_id) {
        this.params.engineer_id = obj.engineer_id;
        this.params.device_id = obj.id;
        this.getDeviceHistory();
        console.log(this.resData);
      }
    },
    handleCurrentChange(page) {
      this.params.page = page;
      this.getDeviceHistory();
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    searchClick() {
      console.log(this.date);
      this.params.begin_time = "";
      this.params.end_time = "";
      if (this.date) {
        this.params.begin_time = this.date[0];
        this.params.end_time = this.date[1];
      }
      this.getDeviceHistory();
    },
    //网络请求
    getEngineer() {
      get("/engineer/findEngineerDeviceTree").then((res) => {
        this.engineerTree = res.data;
      });
    },
    getDeviceHistory() {
      get("/monitor/pageQuery", this.params).then((res) => {
        this.resData = res.data;
        console.log(this.resData);
      });
    },
  },
};
</script>

<style>
.history {
  position: absolute;
  top: 0.5em;
  bottom: 0.5em;
  width: 100%;
  display: flex;
}
.leftcontainer {
  width: 250px;
  padding-right: 10px;
  margin-right: 10px;
  border-right: 1px solid #ddd;
}
.rightcontainer {
  flex: 1;
}
.realtimeInput {
  height: 50px;
}
.notList {
  width: 100%;
  padding-top: 50px;
  font-size: 20px;
  text-align: center;
  flex: 1;
}
.search {
  margin-left: 5px;
  background-color: #68c59d;
}
</style>